<style scoped lang="less">
	img{
		height: 50px;
		object-fit: cover;
	}
	:deep(.el-table .el-table__cell){
	    text-align: center !important;
	}
	.demonstration {
		margin-right: 15px;
		margin-left: 15px;
	}
	.vipmassge {
		margin-right: 15px;
	}

	.el-button {
		margin-left: 15px;
	}
	.el-input__wrapper {
		margin-right: 15px;
	}
	h3 {
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
		margin-right: 100px;
	}

	.item1,
	.item2 {
		// margin-left: 50px;
		display: flex;
		flex-wrap: wrap;
	}

	.el-table {
		width: 100vh;
	}
	.common-layout {
		background: #f2f3f5;
		.el-header {
			padding: 0 !important;
			height: 10vh;
		}
		.el-main {
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}

	.tableclass {
		display: flex;
		margin-top: 10px;
		margin-bottom: 20px;
		margin-left: 30px;
		font-size: 16px;
		font-weight: 700;
		p{
			margin-right: 20px;
		}
	}
	
	.cell{
		text-align: center !important;
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 100px;
		text-align: center;
		cursor: pointer;
	}
	.order-header{
		span{
			margin-left: 15px;
		}
	}
	/* 设置滚动条的宽度 */
	::-webkit-scrollbar {
	  width: 5px; /* 滚动条宽度 */
	  background-color: #d9d9d9;
	}
</style>
<template>
	<div class="common-layout">
		<el-container>
			<el-header>
				<Header></Header>
			</el-header>
			<el-main>
				<div v-if="flag">
				<h3>
					分销订单
				</h3>
				<div class="item1">
					<el-form-item label="创建时间" label-width="90">
						<div class="block">
							<el-date-picker style="width:185px" v-model="timevalue" type="datetimerange"
								:shortcuts="shortcuts" range-separator="To" start-placeholder="开始时间"
								end-placeholder="结束时间" />
						</div>
					</el-form-item>
					<el-form-item label="结算状态" label-width="90">
						<el-select style="width: 205px" v-model="statusvalue" clearable placeholder="请选择">
							<el-option v-for="item in paystatus" 
							:key="item.value" 
							:label="item.statusname"
							:value="item.value" />
						</el-select>
					</el-form-item>
					<el-button type="primary" @click="searchOrder">搜索</el-button>
					<el-button @click="replay">重置</el-button>
				</div>
		<div style="overflow-y: scroll;height:60vh">
			<div v-for="order in orderlist" :key="orderlist.order_id">
				<div class="order-header" style="background-color: #d7d7d7;height: 50px;line-height: 50px;">
				  <span class="ordercode">订单编号：{{order.recordsCode }}</span>
				  <span>创建时间：{{order.createTime }}</span>
				  <span>总佣金：---￥</span>
				</div>
				
				<el-table :data="[order]" style="width: 100%;background-color: #ddd;" >
					<el-table-column label="商品" width="110">
						  <template #default="{ row }">
							  <img :src="downloadUrl+row.goodsImage" class="avatar" />
							  {{row.goodsId}}
						  </template>
					</el-table-column>
					<el-table-column label="单位(元)/数量" width="150">
						<template #default="{ row }">
							<p>￥{{row.goodsValue}}</p>
							<p>1件</p>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="退款状态">
						<template #default="{ row }">
							---
						</template>
					</el-table-column>
					<el-table-column label="分销计算价" width="120">
						<template #default="{ row }">
							{{row.priceCost}}￥
						</template>
					</el-table-column>
					<el-table-column label="买家" width="120">
						<template #default="{ row }">
							---
						</template>
					</el-table-column>
					<el-table-column prop="distributionLevel" label="层级"></el-table-column>
					<el-table-column prop="defaultDistribution" label="计算方式" width="96"></el-table-column>
					<el-table-column label="佣金">
						<template #default="{ row }">
							---
						</template>
					</el-table-column>
					<el-table-column prop="distributionStatus" label="结算状态"></el-table-column>
					<el-table-column label="操作" width="180">
					<template #default="{ row }">
						<span class="mya" @click="lookdetail(row)">查看订单</span>
					</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
				<el-pagination
					layout="prev,pager,next"
					:page-count="total"
					:page-size="pageSize"
					v-model:current-page="pageIndex"	
					@current-change="changePage"
				></el-pagination>
			</div>
				<Disorderdetail v-else @update-message="handleMessageUpdate"></Disorderdetail>
			</el-main>
		</el-container>
	</div>
	
</template>
<script setup>
	import Header from '@/components/Header.vue'
	import { useCounterStore } from "@/stores/counter";
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue'
	import {
		Search,
		Lock,
		Calendar
	} from '@element-plus/icons-vue'
	import {
		getdisorderlist
	} from "@/api"
	import { useRouter,useRoute } from 'vue-router'
	import { downloadUrl,baseUrl } from "@/utils/request";
	import Disorderdetail from "./Disorderdetail.vue"
import { number } from 'echarts';
	let router=useRouter()
	let route=useRoute()
	const dialogFormVisible = ref(false)
	let pageIndex = ref(1);
	let pageSize = 5;
	let total = ref(0)
	
	//获取分销订单列表
	let orderlist = ref([])
	const imageUrl = ref('')
	const timevalue=ref('')
	const statusvalue=ref('')
	const paystatus=ref([
		{
			statusname:"未结算",
			value:"0"
		},
		{
			statusname:"已结算",
			value:"1"
		},
	])
	
	const formateDate = (data) => {
		let time = new Date(data)
		let year = time.getFullYear()
		let month = time.getMonth() + 1
		month=month<10 ? "0"+month : month
		let day = time.getDate()
		day=day<10 ? "0"+day : day
		let hour = time.getHours()
		hour=hour<10 ? "0"+hour : hour
		let minute = time.getMinutes()
		minute=minute<10 ? "0"+minute : minute
		let second = time.getSeconds()
		second=second<10 ? "0"+second : second
		return `${year}-${month}-${day} ${hour}:${minute}:${second}`
	}
	let seachData=reactive({
		pageIndex:pageIndex,
		pageSize:pageSize,
		siteId:Number(sessionStorage.getItem("siteId")),
		status:statusvalue,
		startTime:timevalue,
		endTime:'',
	})	
	const getorderList = async () => {
		let res = await getdisorderlist({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:Number(sessionStorage.getItem("siteId")),
		})
		orderlist.value = res.list
		total.value = res.pageCount
		// console.log(res)
	}
	const flag=ref(true)
	function handleMessageUpdate (newMessage) {
		flag.value = newMessage;
	}
	const lookdetail=(row)=>{
		flag.value=false
		sessionStorage.setItem("orderId",row.orderId)
	}
	

	const searchOrder=async()=>{
		let data={}
		for(var i in seachData){
			// console.log(seachData[i]);
			if(seachData[i]){
				data[i]=seachData[i]
			}
		}
		if(data.startTime){
			data.startTime=formateDate(Array.from(timevalue.value)[0])
			data.endTime=formateDate(Array.from(timevalue.value)[1])
		}
		Object.assign(seachData,data)
		let res = await getdisorderlist(seachData)
		orderlist.value = res.list
		total.value = res.pageCount
		
		// getorderList()
	}
	const replay=()=>{
		timevalue.value=null
		seachData.startTime=''
		seachData.endTime=''
		statusvalue.value=''
		getorderList()
	}


	//获取分页
	const changePage = (page) => {
		// console.log(page)
		pageIndex.value = page;
		searchOrder()
	}
	onMounted(() => {
		// console.log(formateDate(Array.from(timevalue.value)[0]));
		// console.log(formateDate(Array.from(timevalue.value)[1]));
		getorderList()
		
	})

	const shortcuts = [{
			text: 'Last week',
			value: () => {
				const end = new Date()
				const start = new Date()
				start.setDate(start.getDate() - 7)
				return [start, end]
			},
		}
	]

</script>